<template>
  <div
    class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-gray-800 dark:via-gray-700 dark:to-gray-900 overflow-hidden relative">
    <!-- 背景装饰元素 -->
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none z-0">
      <div
        class="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-300 dark:bg-blue-900 rounded-full opacity-20 blur-3xl animate-blob"></div>
      <div
        class="absolute top-1/3 right-1/4 w-72 h-72 bg-purple-300 dark:bg-purple-800 rounded-full opacity-20 blur-3xl animate-blob animation-delay-2000"></div>
      <div
        class="absolute bottom-1/4 right-1/3 w-60 h-60 bg-pink-300 dark:bg-pink-900 rounded-full opacity-20 blur-3xl animate-blob animation-delay-4000"></div>
    </div>

    <!-- 浮动数字元素 -->
    <div class="absolute top-10 left-10 text-[120px] font-bold text-blue-200 dark:text-gray-700 opacity-30 select-none">
      {{ randomNumbers[0] }}
    </div>
    <div
      class="absolute bottom-10 right-10 text-[100px] font-bold text-purple-200 dark:text-gray-700 opacity-30 select-none">
      {{ randomNumbers[1] }}
    </div>
    <div
      class="absolute top-1/2 right-10 text-[80px] font-bold text-pink-200 dark:text-gray-700 opacity-30 select-none">
      {{ randomNumbers[2] }}
    </div>
    <div
      class="absolute bottom-10 left-10 text-[90px] font-bold text-green-200 dark:text-gray-600 opacity-30 select-none">
      {{ randomNumbers[3] }}
    </div>
    <div
      class="absolute top-10 left-1/2 transform -translate-x-1/2 text-[80px] font-bold text-yellow-200 dark:text-gray-700 opacity-30 select-none">
      {{ randomNumbers[4] }}
    </div>
    <div
      class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-[70px] font-bold text-orange-200 dark:text-gray-700 opacity-30 select-none">
      {{ randomNumbers[5] }}
    </div>

    <div class="max-w-md w-full text-center relative z-10">
      <div class="relative">
        <div
          class="absolute inset-0 rounded-xl opacity-75 blur-lg animate-pulse bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-900 dark:to-purple-900"></div>
        <div
          class="relative bg-white dark:bg-gray-900 rounded-xl shadow-2xl p-8 max-w-md w-full space-y-6 transform transition-all duration-500 hover:shadow-3xl hover:-translate-y-1">
          <div class="flex justify-center p-t-3">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-16 w-16 text-red-500 animate-bounce"
              viewBox="0 0 20 20"
              fill="currentColor">
              <path
                fill-rule="evenodd"
                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                clip-rule="evenodd" />
            </svg>
          </div>
          <h1 class="text-8xl font-bold text-center text-gray-800 dark:text-white tracking-tighter">404</h1>
          <p class="text-xl text-center text-gray-600 dark:text-gray-300 mb-6">您访问的页面不存在或已被移动</p>
          <div class="flex flex-col items-center gap-4">
            <router-link
              to="/"
              class="flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg group">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 mr-2 transition-transform duration-300 group-hover:scale-110"
                viewBox="0 0 20 20"
                fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
                  clip-rule="evenodd" />
              </svg>
              返回首页
            </router-link>
            <button
              @click="goBack"
              class="flex items-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-red-100 font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 cursor-pointer">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H15a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
                  clip-rule="evenodd" />
              </svg>
              返回上一页
            </button>
          </div>
          <p class="text-sm text-center text-gray-500 dark:text-gray-400 mt-4">或者尝试搜索您需要的内容</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useThemeStore } from '@/stores/theme'
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const themeStore = useThemeStore()
const router = useRouter()

// 生成随机数字用于装饰
const randomNumbers = ref<number[]>([])

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 生成6个随机数字
const generateRandomNumbers = () => {
  const numbers = []
  for (let i = 0; i < 6; i++) {
    // 生成100-999之间的随机数
    numbers.push(Math.floor(100 + Math.random() * 900))
  }
  randomNumbers.value = numbers
}

onMounted(() => {
  themeStore.initTheme()
  generateRandomNumbers()

  // 每隔5秒更新一次随机数字
  const interval = setInterval(generateRandomNumbers, 5000)

  // 组件卸载时清除定时器
  onUnmounted(() => {
    clearInterval(interval)
  })
})
</script>

<style scoped>
/* 自定义动画效果 */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* 确保在暗色模式下的对比度 */
.dark .text-gray-700 {
  color: rgba(156, 163, 175, 0.3);
}
</style>
